/******************************************************************************
* File description: MaintenanceYingGuang2BeiJingPianChaTable.qml
* Function: 维护-荧光检测：背景偏差表格
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-29
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Qt.labs.qmlmodels 1.0

Item {
    id: root

    /* property 定义开始 */
    property int plateRowCount: 8 // 反应板行数
    property int plateColCount: 48 // 反应板列数
    // 字母表
    property var alphabetList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
    // 横向表头数组
    property var horHeaderList: []
    // 横向表头高
    property int horizontalHeaderHeight: 40
    // 纵向表头宽
    property int verticalHeaderWidth: 90
    // 左上角角落
    property string cornerColor: "#FFEBF3FF"
    property int cornerBorderWidth: 0
    property string cornerBorderColor: "transparent"
    // 表格数据
    property var tableModels: []

    // private
    property int _itemIndex: 0 // 记录每个代理对象的下表，反推出所在行列
    property var _startPoint: [-1, -1] // 记录起点坐标
    property var _endPoint: [-1, -1] // 记录终点坐标
    property bool _isPressed: false // 鼠标按下信号
    property int _curMouseRow: -1 // 鼠标当前所在行
    property int _curMouseCol: -1 // 鼠标当前所在列
    property var _tableModel: root.tableModels
    property int _originX: 0 // 原始X坐标，判定表格左右滑动
    property int _horHeaderItemWidth: -1 // 记录横向表头每一个Item的宽度

    // 信号
    signal pressedIndex(int index) // 发送表格下标信号

    // 函数
    // 下标转行列
    function index2RowCol(index){
        return [parseInt(index / plateColCount), index % plateColCount]
    }

    // 行列转下标
    function rowCol2Index(row, col){
        return row * plateColCount + col
    }

    // 生成横向表头数组
    function createHorHeaderDataList() {
        var chineseNumberList = ["一", "二", "三", "四"]
        var horHeaderList = []
        for(let i = 0; i < root.plateColCount/4; i++) {
            for(let j = 0; j < chineseNumberList.length; j++) {
                let itemStr = (i+1).toString() + "孔通道" + chineseNumberList[j]
                horHeaderList.push(itemStr)
            }
        }
        // console.log(horHeaderList)
        root.horHeaderList = horHeaderList
    }

    // 组件
    Component {
        id: tableModelColumn

        TableModelColumn {display: ""}
    }

    /* property 定义结束 */

    GLOBAL{id: global}

    Rectangle {
        id: table
        anchors.fill: parent
        color: "#FFEBF3FF"
        clip: true
        border.width: 1
        border.color: "transparent"

        // 横向表头
        Item {
            id: horizontalHeaderFlickable
            width: parent.width - verticalHeader.width
            height: horizontalHeaderHeight
            anchors {
                top: parent.top
                left: parent.left
                leftMargin: verticalHeader.width
            }
            clip: true

            Item {
                id: horizontalHeader
                height: parent.height
                x: _originX
                y: 0

                Row {
                    spacing: 0

                    Repeater {
                        model: root.horHeaderList

                        Rectangle {
                            id: headerItem
                            width: headerItemtext.implicitWidth
                            height: horizontalHeader.height
                            color: "transparent"
                            border.width: 0

                            Text {
                                id: headerItemtext
                                text: qsTr(modelData)
                                anchors.centerIn: parent
                                leftPadding: 16
                                rightPadding: 16
                                font.pixelSize: 16
                                font.family: "Alibaba PuHuiTi"
                                color: "#FF222222"
                            }

                            Component.onCompleted: {
                                // 画边框
                                global.createLeftBorder(this, 2, "#FFCCCCCC")
                                global.createTopBorder(this, 2, "#FFCCCCCC")
                                // 记录宽度
                                root._horHeaderItemWidth = headerItemtext.implicitWidth
                            }
                        }
                    }
                }

                Component.onCompleted: {
                    // 生成表头数据
                    root.createHorHeaderDataList()
                }
            }
        }

        // 纵向表头
        Item {
            id: verticalHeader
            width: verticalHeaderWidth
            height: parent.height - horizontalHeader.height
            anchors {
                top: parent.top
                left: parent.left
                topMargin: horizontalHeaderHeight
            }

            Column {
                spacing: 0

                Repeater {
                    model: plateRowCount

                    Rectangle {
                        width: verticalHeader.width
                        height: verticalHeader.height / plateRowCount
                        color: "transparent"
                        border.width: 0

                        Text {
                            text: qsTr(alphabetList[index])
                            anchors.centerIn: parent
                            font.pixelSize: 16
                            font.family: "Alibaba PuHuiTi"
                            color: "#FF222222"
                        }

                        Component.onCompleted: {
                            // 画上边框
                            global.createTopBorder(this, 2, "#FFCCCCCC")
                            // 结尾画下边框
                            global.createBottomBorder(this, 2, "#FFCCCCCC", index === root.plateRowCount-1)
                        }
                    }
                }
            }
        }

        // 左上角
        Rectangle {
            id: leftTopCorner
            width: verticalHeader.width
            height: horizontalHeaderFlickable.height
            anchors {
                top: parent.top
                left: parent.left
                right: horizontalHeaderFlickable.left
                bottom: verticalHeader.top
            }
            color: root.cornerColor
            border.width: root.cornerBorderWidth
            border.color: root.cornerBorderColor

            // 文字
            Label {
                anchors.centerIn: parent
                font.pixelSize: 16
                color: "#FF222222"
                text: "卡位/通道"
            }

            // 绘制框线
            Component.onCompleted: {
                global.createTopBorder(this, 2, "#FFCCCCCC")
            }
        }

        // 表格内容
        TableView {
            id: tableContent
            width: parent.width
            height: verticalHeader.height
            anchors {
                top: parent.top
                left: parent.left
                topMargin: horizontalHeaderFlickable.height
                leftMargin: verticalHeader.width
            }
            clip: true
            boundsBehavior: Flickable.StopAtBounds
            columnSpacing: 0
            rowSpacing: 0

            columnWidthProvider: function(column){
                return root._horHeaderItemWidth - 16
            }

            rowHeightProvider: function(row){
                return tableContent.height / plateRowCount
            }

            onWidthChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            onHeightChanged: {
                forceLayout() // 强制重新布局刷新视图
            }

            //使列表头(横向表头)跟随表格移动
            onContentXChanged: {
                horizontalHeader.x = _originX -
                        (tableContent.contentX - tableContent.originX);
            }

            model: TableModel {
                id: tableModel

                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}
                // TableModelColumn {display: "1"}

                rows: root._tableModel
            }

            delegate: Rectangle{
                id: tableDelegate

                // 保存变量
                property int curRow: row
                property int curCol: column
                // 边框
                property QtObject leftBorder: null
                property QtObject topBorder: null
                property QtObject bottomBorder: null

                implicitWidth: tableContent.columnWidthProvider(column)
                implicitHeight: tableContent.rowHeightProvider(row)
                color: "transparent"

                Component.onCompleted: {
                    // 边框
                    tableDelegate.leftBorder = global.createLeftBorder(this, 2, "#FFCCCCCC")
                    tableDelegate.topBorder = global.createTopBorder(this, 2, "#FFCCCCCC")
                    tableDelegate.bottomBorder = global.createBottomBorder(this, 2, "#FFCCCCCC", row === root.plateRowCount-1)
                }

                // 槽函数
                Connections {
                    target: root
                    // 点击表格事件
                    function onPressedIndex(index){
                        var [posRow, posCol] = root.index2RowCol(index)
                        // 设置起始下标和结束下标
                        var startRowIndex = Math.min(posRow, root._startPoint[0])
                        var endRowIndex = Math.max(posRow, root._startPoint[0])
                        var startColIndex = Math.min(posCol, root._startPoint[1])
                        var endColIndex = Math.max(posCol, root._startPoint[1])
                        // 各个边框颜色
                        var leftBorderColor = tableDelegate.leftBorder.color
                        var topBorderColor = tableDelegate.topBorder.color
                        var bottomBorderColor = tableDelegate.bottomBorder.color
                        // 背景颜色
                        var bgColor = tableDelegate.color

                        // 背景
                        if(tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex &&
                                tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex) {
                            // 颜色不同则渲染
                            if(bgColor !== "#1A2F42CD") tableDelegate.color = "#1A2F42CD"
                        }else {
                            // 颜色不同则渲染
                            if(bgColor != "transparent") tableDelegate.color = "transparent"
                        }

                        // 边框
                        // 上边框
                        if(tableDelegate.curRow === startRowIndex &&
                                tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex){
                            // 修改颜色
                            tableDelegate.topBorder.color = "#FF2F42CD"
                        }else {
                            tableDelegate.topBorder.color = "#FFCCCCCC"
                        }
                        // 左边框
                        if(tableDelegate.curCol === startColIndex &&
                                tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex){
                            // 修改颜色
                            tableDelegate.leftBorder.color = "#FF2F42CD"
                        }else {
                            tableDelegate.leftBorder.color = "#FFCCCCCC"
                        }
                        // 右边框
                        // 判断不为左边框
                        if(tableDelegate.curCol !== startColIndex) {
                            // 右一个表格的左边框
                            if(tableDelegate.curCol === endColIndex+1 &&
                                    tableDelegate.curRow >= startRowIndex && tableDelegate.curRow <= endRowIndex){
                                // 修改颜色
                                tableDelegate.leftBorder.color = "#FF2F42CD"
                            }else {
                                tableDelegate.leftBorder.color = "#FFCCCCCC"
                            }
                        }
                        // 下边框
                        // 判断不为上边框
                        if(tableDelegate.curRow !== startRowIndex) {
                            // 下一个表格的上边框
                            if(tableDelegate.curRow === endRowIndex+1 &&
                                    tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex){
                                // 修改颜色
                                tableDelegate.topBorder.color = "#FF2F42CD"
                            }else {
                                tableDelegate.topBorder.color = "#FFCCCCCC"
                            }
                        }
                        // 真正的下边框（只有最后一行元素存在）
                        if(tableDelegate.curRow === endRowIndex &&
                                tableDelegate.curCol >= startColIndex && tableDelegate.curCol <= endColIndex) {
                            // 修改颜色
                            tableDelegate.bottomBorder.color = "#FF2F42CD"
                        }else {
                            tableDelegate.bottomBorder.color = "#FFCCCCCC"
                        }

                        // 重新绘制边框
                        // 颜色不同则渲染
                        if(leftBorderColor !== tableDelegate.leftBorder.color) tableDelegate.leftBorder.requestPaint()
                        if(topBorderColor !== tableDelegate.topBorder.color) tableDelegate.topBorder.requestPaint()
                        if(bottomBorderColor !== tableDelegate.bottomBorder.color) tableDelegate.bottomBorder.requestPaint()
                    }
                }
            }

            MouseArea {
                width: parent.contentWidth
                height: parent.height
                hoverEnabled: true
                onPressed: {
                    var mouseX = mouse.x
                    var mouseY = mouse.y
                    // 边界判断
                    if(mouseX >= parent.width) mouseX = parent.width - 1
                    if(mouseY >= parent.height) mouseY = parent.height - 1
                    if(mouseX < 0) mouseX = 0
                    if(mouseY < 0) mouseY = 0
                    // 设置值
                    _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                    _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                                plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                    _startPoint = [_curMouseRow, _curMouseCol]
                    root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))
                    _isPressed = true
                }
                onPositionChanged: {
                    if(_isPressed){
                        var mouseX = mouse.x
                        var mouseY = mouse.y
                        // 边界判断
                        if(mouseX >= parent.width) mouseX = parent.width - 1
                        if(mouseY >= parent.height) mouseY = parent.height - 1
                        if(mouseX < 0) mouseX = 0
                        if(mouseY < 0) mouseY = 0
                        // 设置值
                        _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                    plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                        _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                                    plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                        root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol))


                        console.log(root.pressedIndex(rowCol2Index(_curMouseRow, _curMouseCol)), _curMouseRow, _curMouseCol)
                    }
                }
                onReleased: {
                    var mouseX = mouse.x
                    var mouseY = mouse.y
                    // 边界判断
                    if(mouseX >= parent.width) mouseX = parent.width - 1
                    if(mouseY >= parent.height) mouseY = parent.height - 1
                    if(mouseX < 0) mouseX = 0
                    if(mouseY < 0) mouseY = 0
                    // 设置值
                    _curMouseRow = parseInt(mouseY / tableContent.rowHeightProvider(0)) > plateRowCount ?
                                plateRowCount : parseInt(mouseY / tableContent.rowHeightProvider(0))
                    _curMouseCol = parseInt(mouseX / tableContent.columnWidthProvider(0)) > plateColCount ?
                                plateColCount : parseInt(mouseX / tableContent.columnWidthProvider(0))
                    _endPoint = [_curMouseRow, _curMouseCol]
                    _isPressed = false
                }
            }

            Component.onCompleted: {
                // root.tableModels = [
                //             {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""},
                //             {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""},
                //             {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""},
                //             {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""},
                //             {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""},
                //             {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""},
                //             {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""},
                //             {"A": "", "B": "", "C": "", "D": "", "E": "", "F": "", "G": "", "H": "", "I": "", "J": "", "K": "", "L": ""}
                //         ]
            }
        }
    }
}
